import './voucher.less';
import type { ColumnsType } from 'antd/es/table';
import { Table, Space, Switch, Modal, Input, Form, Radio, Checkbox, Popconfirm, message } from 'antd';
import React, { useState, useEffect } from 'react';
import { getVoucher, addVoucher, delVoucher } from '@/services/settings/voucher'

interface FieldType {
    sobId: number;
    vfsName: string;
    defaultIf: number;
};

interface AddVoucher {
    isModalOpen: boolean;
    onCreate: (values: FieldType) => void;
    onCancel: () => void;
}

const CollectionAddForm: React.FC<AddVoucher> = ({
    isModalOpen,
    onCreate,
    onCancel,
}) => {
    const [form] = Form.useForm();
    return (
        <Modal
            open={isModalOpen}
            title="凭证字"
            okText="确认"
            cancelText="取消"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                initialValues={{
                    defaultIf: 0,
                    sobId: 1,
                    vfsName: ""
                }}
                autoComplete="off"
                className='modalForm'
            >
                <Form.Item name="sobId" style={{ display: "none" }}></Form.Item>
                <Form.Item<FieldType>
                    label="凭证字"
                    name="vfsName"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写凭证字' />
                </Form.Item>
                <Form.Item name="defaultIf" label="是否默认：" rules={[{ required: true, message: 'Please input your username!' }]}>
                    <Radio.Group>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </Form.Item>
            </Form>
        </Modal>
    );
};
// 编辑
interface EditFieldType {
    sobId: number;
    vfsName: string;
    defaultIf: number;
};

interface EditVoucher {
    isEditModalOpen: boolean;
    onCreateEdit: (values: EditFieldType) => void;
    onCancel: () => void;
}
const CollectionEditForm: React.FC<EditVoucher> = ({
    isEditModalOpen,
    onCreateEdit,
    onCancel,
}) => {
    const [editForm] = Form.useForm();
    return (
        <Modal
            open={isEditModalOpen}
            title="凭证字"
            okText="确认"
            cancelText="取消"
            onCancel={onCancel}
            onOk={() => {
                editForm
                    .validateFields()
                    .then((values) => {
                        editForm.resetFields();
                        onCreateEdit(values);
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={editForm}
                // initialValues={{
                //     defaultIf: 0,
                //     sobId: 1,
                //     vfsName: ""
                // }}
                autoComplete="off"
                className='modalForm'
            >
                <Form.Item name="sobId" style={{ display: "none" }}></Form.Item>
                <Form.Item<FieldType>
                    label="凭证字"
                    name="vfsName"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写凭证字' />
                </Form.Item>
                <Form.Item name="defaultIf" label="是否默认：" rules={[{ required: true, message: 'Please input your username!' }]}>
                    <Radio.Group>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </Form.Item>
            </Form>
        </Modal>
    );
};
const voucher: React.FC = () => {
    // 渲染
    useEffect(() => {
        render();
    }, [])
    const render = async () => {
        const { data, code } = await getVoucher()
        if (code == 0) {
            setData(data)
        }
    }


    // 删除
    const confirm = async (vfsId: string) => {
        const { code } = await delVoucher(vfsId)
        if (code == 0) {
            message.success('删除成功')
            render()
        }

    }
    const cancel = (e: any) => {
        console.log(e);
        message.error('Click on No');
    };
    const [data, setData] = useState([])
    // 表格
    interface DataType {
        key: React.Key;
        vfsName: string;
        defaultIf: string;
        vfsId: string;
        state: string;
        operate: string;
    }

    const columns: ColumnsType<DataType> = [
        {
            title: '凭证字',
            dataIndex: 'vfsName',
        },
        {
            title: '是否默认',
            dataIndex: 'defaultIf',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (_, record) => (
                <Space direction="vertical">
                    <Switch checkedChildren="启用" unCheckedChildren="关闭" defaultChecked />
                </Space>
            ),
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        setIsModalOpenEdit(true);
                        // Form.setFieldsValue(record)
                    }
                    }
                    >编辑</a>
                    <Popconfirm
                        title="删除"
                        description="确定删除吗?"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => { confirm(record.vfsId) }}
                        onCancel={cancel}
                    >
                        <a >删除</a>
                    </Popconfirm>
                    <></>
                </Space>
            ),
        },
    ];
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },

    };
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [isModalOpen, setIsModalOpen] = useState(false);//增加
    const [isModalOpenEdit, setIsModalOpenEdit] = useState(false);//编辑
    //添加
    const onCreate = async (values: any) => {
        console.log(values, 11);

        const { code } = await addVoucher(values)
        if (code == 0) {
            render()
            message.success('添加成功')
            setIsModalOpen(false);
        }
    };
    // 编辑
    const onCreateEdit = async (values: any) => {
        console.log(1);
        // let data = Form.getFieldValue()
        // let json = {
        //     vfsName: data.vfsName,
        //     defaultIf: data.defaultIf,
        //     vfsId: data.vfsId
        // }

        setIsModalOpenEdit(false);

    };
    return <div>

        <div className='public'>
            <div className='publicTit'>
                凭证字管理
                <div></div>
            </div>
            <hr />
        </div>
        <div className='btnBoxDiv'>
            <button className='addBtn' onClick={() => { setIsModalOpen(true) }}>增加</button>
        </div>
        {/* 增加的模态框 */}
        <CollectionAddForm isModalOpen={isModalOpen}
            onCreate={onCreate}
            onCancel={() => {
                setIsModalOpen(false);
            }} />
        {/* 编辑的模态框 */}
        <CollectionEditForm isEditModalOpen={isModalOpenEdit}
            onCreateEdit={onCreateEdit}
            onCancel={() => {
                setIsModalOpenEdit(false);
            }} />
        {/* 表格 */}
        <Table className="voucherTab"
            rowSelection={{
                type: selectionType,
                ...rowSelection,
            }}
            columns={columns}
            dataSource={data}
            pagination={false}
        />
    </div>
}
export default voucher;